<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
         * 虚拟 DOM （ Virtual DOM ）这个概念相信⼤家都不陌⽣，从 React 到 Vue ，虚拟 DOM 为
            这两个框架都带来了跨平台的能⼒（ React-Native 和 Weex ）
            实际上它只是⼀层对真实 DOM 的抽象，以 JavaScript 对象 ( VNode 节点) 作为基础的树，⽤对
            象的属性来描述节点，最终可以通过⼀系列操作使这棵树映射到真实环境上
            在 Javascript 对象中，虚拟 DOM 表现为⼀个 Object 对象。并且最少包含标签名 ( tag )、属
            性 ( attrs ) 和⼦元素对象 ( children ) 三个属性，不同框架对这三个属性的名命可能会有差别

            创建虚拟 DOM 就是为了更好将虚拟的节点渲染到⻚⾯视图中，所以虚拟 DOM 对象的节点与真实 DOM 的属性⼀⼀照应,在 vue 中同样使⽤到了虚拟 DOM 技术

            DOM 是很慢的，其元素⾮常庞⼤，⻚⾯的性能问题，⼤部分都是由 DOM 操作引起的
            真实的 DOM 节点，哪怕⼀个最简单的 div 也包含着很多属性，可以打印出来直观感受⼀下：
            由此可⻅，操作 DOM 的代价仍旧是昂贵的，频繁操作还是会出现⻚⾯卡顿，影响⽤户的体验

            你⽤传统的原⽣ api 或 jQuery 去操作 DOM 时，浏览器会从构建 DOM 树开始从头到尾执⾏⼀遍流程
            当你在⼀次操作时，需要更新10个 DOM 节点，浏览器没这么智能，收到第⼀个更新 DOM 请求后，并不
            知道后续还有9次更新操作，因此会⻢上执⾏流程，最终执⾏10次流程
            ⽽通过 VNode ，同样更新10个 DOM 节点，虚拟 DOM 不会⽴即操作 DOM ，⽽是将这10次更新的 di
            ff 内容保存到本地的⼀个 js 对象中，最终将这个 js 对象⼀次性 attach 到 DOM 树上，避免⼤量
            的⽆谓计算

            很多⼈认为虚拟 DOM 最⼤的优势是 diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消耗。
            虽然这⼀个虚拟 DOM 带来的⼀个优势，但并不是全部。虚拟 DOM 最⼤的优势在于抽象了原本的渲染
            过程，实现了跨平台的能⼒，⽽不仅仅局限于浏览器的 DOM，可以是安卓和 IOS 的原⽣组件，可以是
            近期很⽕热的⼩程序，也可以是各种GUI

            当初引入虚拟Dom是为了解决文档碎片的问题  就是document fragment来去批量更新Dom,减少页面的重绘和重排
                但是有时候想把它去掉 vue 通过 Viper Mode

            缺点:
                初次渲染开销
                复杂度增加--学习曲线
                内存占用
                Diff算法并非总是最优

                优点	说明
        ⚡ 性能优化	减少真实 DOM 操作，批量更新，避免频繁重排重绘
        🌐 跨平台支持	支持 SSR、React Native、小程序等
        🧱 声明式开发	开发者关注数据和 UI 映射，无需手动操作 DOM
        🔍 高效 diff 算法	快速比对变化，最小化更新范围
        🧪 易于测试	虚拟 DOM 是 JS 对象，便于单元测试
        🧩 组件化友好	支持模块化、可复用的 UI 组件
        🛠️ 减少错误	避免手动 DOM 操作带来的常见 bug

         * 
         * **/ 
    </script>
</body>
</html>